<template lang="html">
  <div>
    <Row>
      <Col span="18">
        <Form ref="blogInfo" :model="blogInfo" :rules="blogRules"
             label-position="left" :label-width="100">
            <FormItem label="标题" prop="title">
                <Input v-model="blogInfo.title" :style="{width: '400px'}"></Input>
            </FormItem>
            <FormItem label="是否公开">
                <i-switch v-model="blogInfo.publish" size="large">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                </i-switch>
            </FormItem>
            <FormItem v-if="blogInfo.publish" label="投稿栏目" >
                <Cascader :style="{width: '400px'}" :data="blogCategories" v-model="blogInfo.category"></Cascader>
            </FormItem>
            <FormItem label="备注">
                <Input v-model="blogInfo.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" :style="{width: '400px'}"></Input>
            </FormItem>
        </Form>

        <quill-editor v-model="content" :options="editorOpts" :style="{backgroundColor: '#fff'}">
        </quill-editor>
      </Col>
      <Col span="6" :style="{paddingLeft: '10px'}">
        <Card :style="{borderRadius: '0px', minHeight: '300px'}">
          <p slot="title"></p>
        </Card>
      </Col>
    </Row>
    <Button @click="handleSumbitBlog" type="primary" shape="circle" icon="ios-paperplane-outline" size="large" class="icon-submit-position"></Button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      blogCategories: [],
      blogInfo: {
        title: '',
        publish: false,
        category: [],
        description: '',
      },
      blogRules: {
        title: [{
          required: true,
          message: '标题不能为空',
          trigger: 'blur'
        }],
      },
      content: '',
      editorOpts: {
        placeholder: '请开始你的表演...',
        readOnly: false,
        minHeight: 500,
      },
    }
  },
  methods: {
    handleSumbitBlog () {
      this.$refs.blogInfo.validate((valid) => {
        if (valid) {
          if (this.blogInfo.publish) {
            console.log(this.blogInfo.category);
            let parentUri = this.blogInfo.category[0].replace(/\/\d+$/, '/' + this.blogInfo.category[1])
            console.log(parentUri);
          }
          this.$store.dispatch('blogCreationAsync', {
            title: this.blogInfo.title,
            content: this.content,
            description: this.blogInfo.description,
            parentCategory: this.blogInfo.publish
              ? this.blogInfo.category[0].replace(/\/\d+/, '/' + this.blogInfo.category[1])
              : null
          })
          .then(res => {
            if (res.data) {
              this.$Message.success('新建博文成功')
            }
          })
          .catch(err => {
            console.log(err)
            this.$Message.error('新建博文错误')
          })
        }
      })
    },

    // 获取category列表
    handleCategoryList () {
      this.$store.dispatch('rootCategoriesAsync')
        .then(res => {
          const {_embedded: {blogCategories}} = res.data
          blogCategories.map((category) => {
            this.blogCategories.push({
              label: category.name,
              value: category._links.self.href,
              disabled: category.children.length === 0,
              children: category.children.map((child) => {
                return {
                  label: child.name,
                  value: child.id,
                }
              })
            })
          })
        })
        .catch(error => {
          console.log(error);
        })
    }
  },

  beforeMount () {
    this.handleCategoryList()
    console.log(this.blogCategories);
  }

}
</script>

<style lang="css">
  .ql-container {
    min-height: 500px;
  }
  .icon-submit-position{
    position: fixed;
    bottom: 50px;
    right: 50px;
  }
</style>
